<template>
    <div>
        <div class="detail_header">
            <span @click="editWord" v-if="word!=null&&word.word" style="float:right">
                <v-icon color="primary" icon="mdi-square-edit-outline" /></span>
            <span @click="showBookList" v-if="word!=null&&word.word" style="float:right;margin-right: 10px;">
                <v-icon color="primary" icon="mdi-folder-plus-outline" />
            </span>
            <strong>{{ word.word }}</strong>
            <!-- <v-img v-if="word.image != null" :width="100" aspect-ratio="1/1" cover :src="word.image"></v-img> -->
            <br>
            <!-- <div v-if="word.pronunciation != null && word.pronunciation.length > 0">
                <span @click="playAudio(pronunciation)" v-for="(pronunciation, index) in word.pronunciation" v-bind:key="index">
                    <small style="font-size: 16px;">&nbsp;{{ pronunciation.region }}[{{ pronunciation.symbol}}]</small>
                    <v-icon size="small" icon="mdi-volume-high"></v-icon>
                </span>
            </div> -->
            <PronunciationComponent direction="horizon" ref="pronunciationComponent" balance="left"/>
            <!-- <v-chip-group>
                <v-chip>Chip 1</v-chip>
            </v-chip-group> -->
        </div>
        <div v-if="word.etymologyPlain != null">
            <v-divider></v-divider>
            <small>单词词源</small>
            <p>{{ word.etymologyPlain }}</p>
            <br>
        </div>
        <div v-if="word.translatedMeanings != null && word.translatedMeanings.length > 0">
            <v-divider></v-divider>
            <small>单词释义</small>
            <p :key="index" v-for="(mean, index) in word.translatedMeanings"><span v-if="mean.type!=null">{{ mean.type }}.</span> {{ mean.meaning }}</p>
            <br>
        </div>
        <div v-if="word.wordExchange != null">
            <v-divider></v-divider>
            <small>单词变形</small>
            <p :key="index" v-for="(exchange, index) in Object.keys(word.wordExchange)">{{exchange}}：{{ word.wordExchange[exchange] }}</p>
            <br>
        </div>
        <div v-if="word.remember != null">
            <!-- <v-divider></v-divider> -->
            <small>记忆技巧：</small>
            <span>{{ word.remember }}</span>
            <br>
        </div>
        <div v-if="word.tag != null && word.tag.length > 0">
            <!-- <v-divider></v-divider> -->
            <!-- <small>标签</small> -->
            <!-- <v-chip :key="index" v-for="(mean, index) in word.tag">{{ mean }}</v-chip> -->
            <small class="word_tag" :key="index" v-for="(mean, index) in word.tag">{{ mean }}</small>
            <br>
        </div>
        <div v-if="word.originalMeanings != null && word.originalMeanings.length > 0">
            <v-divider></v-divider>
            <small>原释义</small>
            <div v-for="(mean, index) in word.originalMeanings" :key="index">
                <strong>{{ mean.type }} {{ mean.symbol!=null?'['+mean.symbol+']':'' }}</strong>
                <p style="text-indent: 10px;" v-for="(item, index2) in mean.meaning" :key="index2">{{ index2 + 1 }}.
                {{item.explain }}</p>
            </div>
            <br>
        </div>
        <div v-if="word.sentence != null && word.sentence.length > 0">
            <v-divider></v-divider>
            <small>相关例句</small>
            <p :key="index" v-for="(sentence, index) in word.sentence">
                {{ sentence.self }}
                <br>
                {{ sentence.mean }}
            </p>
        </div>
        <!-- <span style="display: block;width: fit-content;margin: auto;color:grey;">数据来源：<strong>{{word.source}}</strong></span> -->
        <!-- <div v-if="false" class="detail_bottom">
            <v-divider></v-divider>
            <br>
            <span style="float:left"><v-icon start icon="mdi-arrow-left"></v-icon>ambulance</span>
            <span style="float:right">academic<v-icon start icon="mdi-arrow-right"></v-icon></span>
        </div> -->
    </div>
    <v-dialog v-model="dialog" persistent width="100%">
        <v-card title="选择要加入的字典">
            <v-list lines="three" select-strategy="classic">
                <v-list-item :value="book.id" v-for="book in bookList" v-bind:key="book.id">
                    <template v-slot:prepend>
                        <v-list-item-action start>
                            <v-checkbox :value="book.id" v-model="checkBookList" />
                        </v-list-item-action>
                    </template>
                    <v-list-item-title>{{ book.title }}</v-list-item-title>
                    <v-list-item-subtitle>
                        {{ book.remark }}
                    </v-list-item-subtitle>
                </v-list-item>
            </v-list>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn variant="text" @click="dialog = false">
                    取消
                </v-btn>
                <v-btn variant="text" @click="addWordLine">
                    确认
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-snackbar v-model="snackbar">
        {{ snackbarMsg }}
    </v-snackbar>
</template>

<script>
import { bookList } from "@/api/book.js";
import { addUserWordLine } from "@/api/wordLine.js";
import PronunciationComponent from "@/components/PronunciationComponent.vue";
export default {
    components:{PronunciationComponent},
    data() {
        return {
            word: {},
            dialog: false,
            bookList: [],
            snackbarMsg:'',
            snackbar:false,
            checkBookList:[],
            overlay:false,
            audio:null,
            audioUrl:undefined
        }
    },
    created() {
        this.geBookList()
    },
    methods: {
        detail(row) {
            this.word = row
            if(this.audio!=null){
                this.audio.pause()
                this.audio=null
            }
            this.$refs.pronunciationComponent.setResource(this.word.pronunciation)
        },
        geBookList() {
            bookList(this.bookBo).then(resp => {
                this.bookList = resp.rows
            })
        },
        showBookList() {
            this.dialog = true
        },
        editWord() {
            this.$router.push({ name: 'search_diy_word', params: { lang: 'zh-CN', word: this.word.word } })
        },
        addWordLine() {
            // console.log('checkout  = ',this.checkBookList);
            let wordLineList=[]
            this.checkBookList.forEach(item=>{
                wordLineList.push({
                    wordId:this.word.wordId,
                    bookId:item,
                    ownerId:1
                })
            })
            addUserWordLine(wordLineList).then(resp => {
                this.snackbarMsg=resp.msg
                this.snackbar=true
                this.dialog = false
                this.checkBookList=[]
            })
        },
        playAudio(pronunciation) {
            if (this.audio != null && pronunciation.resource == this.audioUrl) {
                this.audio.pause()
                this.audio = null
                return
            } else if (pronunciation.resource != this.audioUrl) {
                if(this.audio!=null)this.audio.pause()
                this.audio = new Audio(pronunciation.resource)
                this.audio.loop = true
                this.audio.play()
                this.audioUrl = pronunciation.resource
                return
            }
            this.audio = new Audio(pronunciation.resource)
            this.audio.loop = true
            this.audio.play()
            this.audioUrl = pronunciation.resource
        },
    },
    unmounted() {
        if (this.audio != null) {
            this.audio.pause()
            this.audio = null
        }
    },
}
</script>

<style scoped>
.detail_header strong {
    font-size: 50px;
}

.detail_bottom {
    margin-top: 50px;
}

.detail_bottom::after {
    content: '';
    display: block;
}

.detail_bottom span {
    font-size: 18px;
}
.word_tag{
    background: #f2f2f2;
    border-radius: 2px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-right: 12px;
    padding: 0 6px;
}
</style>